<template>
  <el-card>
    <div slot="header">
      <div class="category-head">
        <span>销售额类别占比</span>
        <el-radio-group v-model="way" size="mini">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="门店"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div>
      <!-- 饼图 -->
      <div class="chart" ref="chart"></div>
    </div>
  </el-card>
</template>

<script>
import echarts from "echarts";
import {mapState} from 'vuex';
export default {
  name: "Category",
  data() {
    return {
      way: "全部渠道",
      myEchart:null,
    };
  },
  mounted() {
    //饼图
   this.myEchart = echarts.init(this.$refs.chart);
   this.myEchart.setOption({
      title:{
        text:'',
        subtext:'',
        left:'center',
        top:'center'
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: true,
            position: "outside",
          },
          labelLine: {
            show: true,
          },
          data: [
            { value: 1048, name: "搜索引擎:1048" },
            { value: 735, name: "直接访问:738" },
            { value: 580, name: "邮件营销:580" },
            { value: 484, name: "联盟广告:484" },
            { value: 300, name: "视频广告:300" },
          ],
        },
      ],
    });
    //绑定事件
    this.myEchart.on('mouseOver',(params)=>{
       //获取鼠标移上去的那条数据
       const{name,value} = params.data;
       //重新设置标题
       this.myEchart.setOption({
        title:{
          text:name,
          subtext:value
        }
       })
    })
  },
  methods:{
    //整理参数的方式

  },
  computed:{
    ...mapState({
      saleRank:state=>state.home.list.saleRank
    }),
    //整理online数据
    reSetOnlineData(){
     let obj =   this.saleRank.online.value.map((item,index)=>{
        return{value:item,name:this.saleRank.online.name[index]}
      })
      return obj
    },
    //整理shop数据
    reSetShopData(){
     let obj =   this.saleRank.shop.value.map((item,index)=>{
        return{value:item,name:this.saleRank.shop.name[index]}
      })
      obj = obj.filter((item)=>{
        return item.name!=undefined
      })
      return obj
    },
    //一个全部渠道数据
    resetAllData(){
      return [
            { value: 1048, name: "搜索引擎:1048" },
            { value: 735, name: "直接访问:738" },
            { value: 580, name: "邮件营销:580" },
            { value: 484, name: "联盟广告:484" },
            { value: 300, name: "视频广告:300" },
          ]
    }
  },
  watch:{
    way(){
      if(this.way=='线上'){
        this.myEchart.setOption({
          title:{
            text:'',
            subtext:''
          },
          series:[{
            data:this.reSetOnlineData
          }
          ]
        })
      }else if(this.way=='门店'){
        this.myEchart.setOption({
           title:{
            text:'',
            subtext:''
          },
          series:[{
            data:this.reSetShopData
          }
          ]
        })
      }else{
        this.myEchart.setOption({
          series:[{
            data:this.resetAllData
          }]
        })
      }
    }
  }


};
</script>

<style scoped>
.category-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart {
  width: 100%;
  height: 355px;
}
</style>